<script setup>
import { ref, onMounted, computed } from "vue";
import { getMenu } from "@/unit/menu.js";
import MenuItem from "./item.vue";
import MenuSub from "./sub.vue";

import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();

// 菜单是否收起状态
const theme = computed(() => {
  return store.getters["webset/theme"];
});

// 菜单选中项
const menuSelected = computed(() => {
  return store.getters["webset/menuSelected"];
});

// 定义菜单数组
const menus = ref([]);

onMounted(() => {
  menus.value = getMenu();
});

const onClickMenu = ({ item, keyPath }) => {
  router.push(item.path);
};
</script>

<template>
  <a-menu
    :selectedKeys="menuSelected"
    v-if="menus.length > 0"
    mode="inline"
    :theme="theme"
    @click="onClickMenu"
  >
    <template v-for="menu in menus">
      <MenuItem v-if="!menu.children" :menu="menu" />
      <MenuSub v-else :menu="menu" />
    </template>
  </a-menu>
</template>

<style lang="less" scoped>
.ant-menu {
  height: calc(100vh - 48px);
  overflow: scroll;
}
:deep(.ant-menu-submenu-arrow),
:deep(.ant-menu-submenu-selected),
:deep(.ant-menu-submenu-title:hover),
:deep(.ant-menu-submenu-active) {
  color: @menu-submenu-selected-color!important;
}

:deep(.ant-menu-item-active:not(.ant-menu-item-selected)) {
  color: @menu-submenu-selected-color!important;
  background-color: @menu-item-active-bg;
}
:deep(.ant-menu-submenu-arrow::before) {
  height: 1px;
}
:deep(.ant-menu-submenu-arrow::after) {
  height: 1px;
}
</style>